/** @jsxImportSource @emotion/react */
import { jsx, css } from "@emotion/react";
import * as React from "react";
import {useMediaLayout} from "use-media";
import {getHeight} from "./Button";
import {useTheme} from "./Theme/Providers";
import {breakpoints} from "./Theme/breakpoints";
import {Dispatch, SetStateAction} from "react";

/**
 * A Toolbar is typically used in something like the Navbar component.
 * It provides some basic horizontal padding and maintains responsive height.
 */

interface MainMenuBarProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
}

//依据基础组件库配置的按钮 最小高度MOBILE_HEIGHT="30px"; DESKTOP_HEIGHT="48px";
const MOBILE_HEIGHT = getHeight("sm");
const DESKTOP_HEIGHT = getHeight("lg");


/**主菜单: <div>高度不会突破限制，长度方向可能突破限制。
 * 安排在网页最下方的位置就不能用position: sticky设置。若position: absolute;会按视窗定位但是滚动就会滚没掉。
 * : sticky 若top没计算准确的可能须滚动到最底下才会有：不精确。
 * 融合掉 <Navbar />
 *CSS在基础组件库配置的   default: `@media (min-width: 320px) and (max-width: 628px)`,
 *                     md: `@media (min-width: ${points.md})`,    配置库目前的md: "629px",超过>=629的才能算true!
 *依据这个设置，我这里正方形的窗体控制，高度 && 宽度同时达到了较大的标准，有任何一个不达标的就只能紧凑CSS模式。
* */
export const MainMenuBar =
({
     children,
  ...other
}:MainMenuBarProps) => {
    const theme = useTheme();
    //左右两个半页面独立分级路由形式的折叠型框架形态切换的临界点"629px"宽度方向临界点啊。
    const isWideSrc = useMediaLayout({ minWidth: `${breakpoints.md}` });
    const touchScr = useMediaLayout(`(any-pointer: coarse)`);

  return (
      <nav
          css={[
            {
              background: theme.colors.background.default,
              zIndex: theme.zIndices.fixed,
              boxShadow: theme.shadows.sm,
                "@media print": {
                    boxShadow: 'unset',
                },
            },
            css({
                position: "fixed",
                bottom: 0,
                left: 0,
                width: isWideSrc? "50%" : touchScr? "100%" : `calc(100% - ${theme.iconSizes.md} - 0.3rem)`,
            }),
          ]}
          {...other}
      >
        <div
            css={[
              {
                minHeight: MOBILE_HEIGHT,
                display: "flex",
                position: "relative",
                alignItems: "center",
                justifyContent: "space-between",
                [theme.mediaQueries.big] : {
                    minHeight: DESKTOP_HEIGHT,
                },
              },
            ]}
        >
        { children }
        </div>
      </nav>
  );
};

/* CSS里面写上逻辑[`@media']:{} 和 组件js代码体里头传递逻辑 外部指示变量compressed两个对比的；
     {  [`@media (min-height: 629px) and (min-width: 629px)`] : {
            minHeight: MAINBAR_GHEIGHT,
        },
        [theme.mediaQueries.lg]: {},
      },
     compressed ? { minHeight: "48px !important" } : undefined
* */


/**留出菜单临空区域,尺寸等依赖逻辑；
 * noRight  当前URL路由页面没有用右半边的明细页面,
 * rightBig  当前状态把右半边的明细页面放大为整个视口。
 * 通用的CSS切换点， [theme.mediaQueries.md]: { } 配置库目前的 md : "629px"=宽度方向的>=629触发选中该对象;
 * 【毛病】useMedia的局限性？ carousel必须在第二次render才能切换为最终的值，会导致重绘。
 * */
export const useMMenuBarOcup = (noRight:boolean) => {
    const theme = useTheme();
    const isWideSrc = useMediaLayout({ minWidth: `${breakpoints.md}` });
    const isBigSrc = useMediaLayout(`${breakpoints.big}`);
    //必须显示出左边的列表页面：【注意】不仅仅轮播台carousel模式的，窄屏幕且不是触摸屏的极端情况：也是没有展示左边半边页面的。
    // const renderList= noRight || (isWideSrc && !rightBig);  手机触摸屏的情况=coarse至少一个input 包括有限精度的指向。
    const touchScr = useMediaLayout(`(any-pointer: coarse)`);

    //手机触摸屏&&竖屏形式：要用轮播模式的：手机允许快速切换两个半页面。  手机若是横屏宽屏的就不是carousel了。
    //【两个理由】窄屏幕且不是触摸屏的？也无法拉拽啊。#这种极端情况：就会改改成走的是两个半页面的拆开单独展示的模式，若有路由子页面就只能显示右半边，否则只能显示左边列表的模式。
    const carousel= !noRight && !isWideSrc && touchScr;
    const mobileList= noRight && !isWideSrc && touchScr;
    //宽度高度同时满足都是大个的，paddingBottom也就是底部吸附的菜单条才是大个。
  return {
      bottomCss: css({
          paddingBottom: MOBILE_HEIGHT,
          [theme.mediaQueries.big] : {
              paddingBottom: DESKTOP_HEIGHT,
          },
      }),
      isWideSrc,
      // renderList,
      isBigSrc,
      barHeight: isBigSrc? DESKTOP_HEIGHT : MOBILE_HEIGHT,
      carousel,
      touchScr,
      mobileList
  };
};



export interface PanelEnlargeCtxType {
    //非轮播台的电脑模式适用：两个半边页面在非手机轮播台状态下的各占据宽度比例: 左边没有=0，1：左边右边1比2， 2： 1比1， 3： 2比1， 4：右边没有。
    enlarge: number,
    setEnlarge: Dispatch<SetStateAction<number>>,
    //手机轮播台模式下适用的：第1层次的两半页面轮播台控制: 0=左边页面，1=右边页面。
    setActivecas:  (i:number) => void,
    getActivecas?:  () => number,
}

/**应该放在<TwoHalfFrame>的头上引入。 TwoHalfFrame下面右半边页面必须<TwoHalfRightPanel>包裹的。
 * 右半边详细操作页面被放大为整个视口的页面，放大
 * 跨越多层次的APP路由器页面。
 * */
export const PanelEnlargeCtx = React.createContext<PanelEnlargeCtxType>(
null
);


/*
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }
竖屏 @media all and (orientation : portrait) {}
横屏 @media all and (orientation : landscape) {}
export const isMobile = {
      android: () => navigator.userAgent.match(/Android/i),
      blackberry: () => navigator.userAgent.match(/BlackBerry/i),
      ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
      opera: () => navigator.userAgent.match(/Opera Mini/i),
      windows: () => navigator.userAgent.match(/IEMobile/i),
      any: () => (isMobile.android() || isMobile.blackberry() ||
      isMobile.ios() || isMobile.opera() || isMobile.windows())
};
@media (pointer:coarse) {  input[type="checkbox"], input[type="radio"] {    background:transparent;   } }
@media (any-hover: none) { }  ？触摸屏的菜单悬停；
@media (hover:none), (hover:on-demand) {}
@media (any-pointer: coarse) {} none=电视机； coarse=不是很精确=点击按可触摸屏幕。 fine=电脑。
@media (pointer: coarse) {  input[type="checkbox"] {  width: 30px;    height: 30px;  }}
*/